<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人中心</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <style>
    :root {
      --primary-color: #07c160;
      --secondary-color: #f8f8f8;
      --text-color: #333;
      --light-text: #666;
      --border-color: #eaeaea;
      --success-color: #07c160;
      --danger-color: #fa5151;
      --warning-color: #ffc300;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      color: var(--text-color);
      background-color: #f5f5f5;
      margin: 0;
      padding: 0;
      line-height: 1.5;
    }
    
    .container {
      max-width: 100%;
      padding: 0;
      overflow-x: hidden;
    }
    
    /* 顶部导航栏 */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 44px;
      background-color: #fff;
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 1000;
      padding: 0 15px;
    }
    
    .navbar-title {
      font-size: 18px;
      font-weight: 500;
      text-align: center;
      flex: 1;
    }
    
    /* 用户信息区域 */
    .user-profile {
      background-color: white;
      padding: 20px 15px;
      display: flex;
      align-items: center;
    }
    
    .user-avatar {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 15px;
      border: 2px solid rgba(255, 255, 255, 0.3);
    }
    
    .user-info {
      flex: 1;
    }
    
    .user-name {
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 5px;
    }
    
    .user-id {
      font-size: 13px;
      color: var(--light-text);
    }
    
    .user-edit {
      background-color: transparent;
      border: 1px solid var(--border-color);
      color: var(--text-color);
      padding: 5px 10px;
      border-radius: 15px;
      font-size: 12px;
      cursor: pointer;
    }
    
    /* 用户数据统计 */
    .user-stats {
      display: flex;
      background-color: white;
      margin-bottom: 10px;
      border-bottom: 1px solid var(--border-color);
    }
    
    .stat-item {
      flex: 1;
      text-align: center;
      padding: 15px 0;
    }
    
    .stat-count {
      font-size: 18px;
      font-weight: 500;
    }
    
    .stat-label {
      font-size: 12px;
      color: var(--light-text);
      margin-top: 5px;
    }
    
    /* 菜单列表 */
    .menu-list {
      background-color: white;
      margin-bottom: 10px;
    }
    
    .menu-group-title {
      padding: 10px 15px;
      font-size: 14px;
      color: var(--light-text);
      background-color: var(--secondary-color);
    }
    
    .menu-item {
      display: flex;
      align-items: center;
      padding: 15px;
      border-bottom: 1px solid var(--border-color);
      cursor: pointer;
    }
    
    .menu-item:last-child {
      border-bottom: none;
    }
    
    .menu-icon {
      width: 24px;
      text-align: center;
      margin-right: 10px;
      color: var(--primary-color);
    }
    
    .menu-title {
      flex: 1;
      font-size: 15px;
    }
    
    .menu-arrow {
      color: #bbb;
    }
    
    .menu-badge {
      background-color: var(--danger-color);
      color: white;
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 10px;
      margin-right: 10px;
    }
    
    /* 底部导航栏 */
    .bottom-nav {
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #fff;
      border-top: 1px solid var(--border-color);
      height: 50px;
      z-index: 1000;
    }
    
    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 10px;
      color: var(--light-text);
      cursor: pointer;
    }
    
    .nav-item i {
      font-size: 18px;
      margin-bottom: 3px;
    }
    
    .nav-item.active {
      color: var(--primary-color);
    }
    
    /* 页面容器 */
    .page-container {
      padding-bottom: 60px;
    }
    
    /* VIP样式 */
    .vip-banner {
      background: linear-gradient(45deg, #ffba00, #ff9000);
      color: white;
      padding: 15px;
      display: flex;
      align-items: center;
      border-radius: 8px;
      margin: 10px 15px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .vip-icon {
      width: 36px;
      height: 36px;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 15px;
    }
    
    .vip-info {
      flex: 1;
    }
    
    .vip-title {
      font-weight: 500;
      margin-bottom: 5px;
    }
    
    .vip-desc {
      font-size: 12px;
      opacity: 0.8;
    }
    
    .vip-btn {
      background-color: rgba(255, 255, 255, 0.3);
      color: white;
      padding: 5px 10px;
      border-radius: 15px;
      font-size: 12px;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="navbar">
      <div class="navbar-title">个人中心</div>
    </div>
    
    <div class="page-container">
      <!-- 用户信息 -->
      <div class="user-profile">
        <img src="https://img.freepik.com/free-photo/portrait-of-handsome-asian-man_23-2149085207.jpg" alt="用户头像" class="user-avatar">
        <div class="user-info">
          <div class="user-name">张明阳</div>
          <div class="user-id">ID: 10086123</div>
        </div>
        <button class="user-edit" onclick="editProfile()">编辑资料</button>
      </div>
      
      <!-- 用户数据统计 -->
      <div class="user-stats">
        <div class="stat-item" onclick="navigateTo('my_photos.html')">
          <div class="stat-count">16</div>
          <div class="stat-label">我的照片</div>
        </div>
        <div class="stat-item" onclick="navigateTo('my_favorites.html')">
          <div class="stat-count">8</div>
          <div class="stat-label">收藏摄影师</div>
        </div>
        <div class="stat-item" onclick="navigateTo('my_coupons.html')">
          <div class="stat-count">3</div>
          <div class="stat-label">优惠券</div>
        </div>
      </div>
      
      <!-- 会员卡 -->
      <div class="vip-banner" onclick="navigateTo('vip.html')">
        <div class="vip-icon">
          <i class="fas fa-crown"></i>
        </div>
        <div class="vip-info">
          <div class="vip-title">开通VIP会员</div>
          <div class="vip-desc">享受更多特权和优惠</div>
        </div>
        <button class="vip-btn">立即开通</button>
      </div>
      
      <!-- 订单管理 -->
      <div class="menu-list">
        <div class="menu-group-title">订单管理</div>
        <div class="menu-item" onclick="navigateTo('my_orders.html')">
          <div class="menu-icon"><i class="fas fa-file-alt"></i></div>
          <div class="menu-title">全部订单</div>
          <div class="menu-arrow"><i class="fas fa-chevron-right"></i></div>
        </div>
        <div class="menu-item" onclick="navigateTo('my_orders.html?status=pending')">
          <div class="menu-icon"><i class="fas fa-clock"></i></div>
          <div class="menu-title">待拍摄</div>
          <div class="menu-badge">1</div>
          <div class="menu-arrow"><i class="fas fa-chevron-right"></i></div>
        </div>
        <div class="menu-item" onclick="navigateTo('my_orders.html?status=processing')">
          <div class="menu-icon"><i class="fas fa-camera"></i></div>
          <div class="menu-title">处理中</div>
          <div class="menu-arrow"><i class="fas fa-chevron-right"></i></div>
        </div>
        <div class="menu-item" onclick="navigateTo('my_orders.html?status=completed')">
          <div class="menu-icon"><i class="fas fa-check-circle"></i></div>
          <div class="menu-title">已完成</div>
          <div class="menu-arrow"><i class="fas fa-chevron-right"></i></div>
        </div>
      </div>
      
      <!-- 我的服务 -->
      <div class="menu-list">
        <div class="menu-group-title">我的服务</div>
        <div class="menu-item" onclick="navigateTo('my_reviews.html')">
          <div class="menu-icon"><i class="fas fa-star"></i></div>
          <div class="menu-title">我的评价</div>
          <div class="menu-arrow"><i class="fas fa-chevron-right"></i></div>
        </div>
        <div class="menu-item" onclick="navigateTo('my_favorites.html')">
          <div class="menu-icon"><i class="fas fa-heart"></i></div>
          <div class="menu-title">收藏摄影师</div>
          <div class="menu-arrow"><i class="fas fa-chevron-right"></i></div>
        </div>
        <div class="menu-item" onclick="navigateTo('my_address.html')">
          <div class="menu-icon"><i class="fas fa-map-marker-alt"></i></div>
          <div class="menu-title">我的地址</div>
          <div class="menu-arrow"><i class="fas fa-chevron-right"></i></div>
        </div>
      </div>
      
      <!-- 我的钱包 -->
      <div class="menu-list">
        <div class="menu-group-title">我的钱包</div>
        <div class="menu-item" onclick="navigateTo('wallet.html')">
          <div class="menu-icon"><i class="fas fa-wallet"></i></div>
          <div class="menu-title">余额</div>
          <div class="menu-title" style="flex: none; color: var(--primary-color);">¥88.50</div>
          <div class="menu-arrow"><i class="fas fa-chevron-right"></i></div>
        </div>
        <div class="menu-item" onclick="navigateTo('my_coupons.html')">
          <div class="menu-icon"><i class="fas fa-ticket-alt"></i></div>
          <div class="menu-title">优惠券</div>
          <div class="menu-title" style="flex: none; color: var(--primary-color);">3张</div>
          <div class="menu-arrow"><i class="fas fa-chevron-right"></i></div>
        </div>
      </div>
      
      <!-- 设置与帮助 -->
      <div class="menu-list">
        <div class="menu-group-title">设置与帮助</div>
        <div class="menu-item" onclick="navigateTo('settings.html')">
          <div class="menu-icon"><i class="fas fa-cog"></i></div>
          <div class="menu-title">设置</div>
          <div class="menu-arrow"><i class="fas fa-chevron-right"></i></div>
        </div>
        <div class="menu-item" onclick="navigateTo('help_center.html')">
          <div class="menu-icon"><i class="fas fa-question-circle"></i></div>
          <div class="menu-title">帮助中心</div>
          <div class="menu-arrow"><i class="fas fa-chevron-right"></i></div>
        </div>
        <div class="menu-item" onclick="navigateTo('feedback.html')">
          <div class="menu-icon"><i class="fas fa-comment-alt"></i></div>
          <div class="menu-title">意见反馈</div>
          <div class="menu-arrow"><i class="fas fa-chevron-right"></i></div>
        </div>
        <div class="menu-item" onclick="navigateTo('about.html')">
          <div class="menu-icon"><i class="fas fa-info-circle"></i></div>
          <div class="menu-title">关于我们</div>
          <div class="menu-arrow"><i class="fas fa-chevron-right"></i></div>
        </div>
      </div>
    </div>
    
    <!-- 底部导航栏 -->
    <div class="bottom-nav">
      <div class="nav-item" onclick="navigateTo('home.html')">
        <i class="fas fa-home"></i>
        <div>首页</div>
      </div>
      <div class="nav-item" onclick="navigateTo('discover.html')">
        <i class="fas fa-compass"></i>
        <div>发现</div>
      </div>
      <div class="nav-item" onclick="navigateTo('my_orders.html')">
        <i class="fas fa-file-alt"></i>
        <div>订单</div>
      </div>
      <div class="nav-item active">
        <i class="fas fa-user"></i>
        <div>我的</div>
      </div>
    </div>
  </div>
  
  <script>
    // 导航函数
    function navigateTo(url) {
      window.location.href = url;
    }
    
    // 编辑资料
    function editProfile() {
      navigateTo('edit_profile.html');
    }
  </script>
</body>
</html> 